<template>
  <div>
    <img class="tp" src="@/assets/img/bj.webp" />
    <div class="bk">
      <div class="title">
        {{title}}
      </div>
      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item  orm-item label="用户名" name="username"
          :rules="[{validator:validateusername}]">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password"
          :rules="[
        {validator:validateuserpassword} 
        
        ]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

      
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button class="dl" type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import {logonjk} from '@/api/logon/logon'
import {validateusername,validateuserpassword,onFinishFailed,formState,} from '@/views/Logon/jy'
import {LoginLocalStorage} from '@/views/Logon/dlLocalStorage'
// import type FormState from '@/views/Logon/jy'
import {useRouter} from 'vue-router'
import init from '@/coument/init'
const router=useRouter()
console.log(import.meta.env)
let title=import.meta.env.VITE_AA
 const onFinish = (values: any) => {
    console.log('Success:', values);
    
    logonjk(values).then((res:any)=>{
     console.log(res)
     console.log(1111)
      if(res.code==0){
        message.success(res.msg);
        LoginLocalStorage(res)
        console.log(router)
        init().then((res:any)=>{
          console.log(res)
          router.replace('/')
        })
        
    }else{
        message.error(res.msg);
       
    }
    })
    .catch((error)=>{
      console.log(error)
    })
  };

</script>

<style scoped>
.tp {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.bk {
  width: 35vw;
  height: 20vw;
  border: 1px solid rgb(250, 184, 63);
  border-radius: 5px;
  box-shadow: 0px 0px 35px 20px rgb(250, 184, 63);
  position: absolute;
  top: 16vw;
  left: 35vw;
}

.title {
  color: aliceblue;
  margin: 2vw 0 0 10vw;
  font-size: 25px;
}
::v-deep .ant-col-8{
  flex: 0.2;
}
::v-deep .ant-form-item-required{
  color: aliceblue;
  margin: 0;
  padding: 0;
}
.ant-form {
  margin: 2vw 0 0 0;
}
.dl{
  margin: 1vw 0 0 3.5vw;
  background: rgb(250, 184, 63);
  border: 1px solid rgb(250, 184, 63);
}
::v-deep .ant-form-item-label > label{
  color: aliceblue;
}
::v-deep .ant-checkbox + span{
  color: aliceblue;
}
</style>
